<template>
    <div>
        <Modal width="1200"
               v-model="modal.addAnnouncementFlag"
               :styles="{top: '50px'}"
               title="消息">
            <br/>
            <Form :label-width="40">
                <FormItem label="标题">
                    <Input v-model="announcement.title" />
                </FormItem>
                <FormItem label="内容">
                    <div ref="editor" class="textNeirong"></div>
                </FormItem>
            </Form>
            <Button slot="footer" :loading="loading" icon="md-checkmark" @click="ok" type="primary">确定</Button>
        </Modal>
    </div>
</template>

<script>
    import E from 'wangeditor'
    export default {

        props: {
            modal: {
                addAnnouncementFlag: false
            },
        },
        data() {
            return {
                loading: false,
                editor: null,//编辑器实例,
                announcement:{
                    title:null,
                }
            }
        },
        methods: {
            ok() {
                this.loading = true
                this.announcement.content = this.editor.txt.html()
                this.announcement.userId = this.$store.state.user.user.userId
                this.http.post("/announcement/saveAddAnnouncement",this.qs.parse(this.announcement)).then(res=>{
                    if(res.data){
                        this.modal.addAnnouncementFlag = false
                        this.$parent.getAllAnnouncement();
                        this.$Message.success({
                            background:true,
                            content:"添加成功"
                        })
                    }
                }).finally(d=>{
                    this.loading = false
                })
            },
            seteditor() {
                this.editor = new E(this.$refs.editor)
                this.editor.config.uploadImgShowBase64 = false // base 64 存储图片
                this.editor.config.uploadImgServer = '/api/backstage/announcement/uploadImage'// 填写配置服务器端地址
                this.editor.config.uploadImgHeaders = { 'Authorization': (new Date()).getTime()}// 自定义 header
                this.editor.config.uploadFileName = 'file' // 后端接受上传文件的参数名
                this.editor.config.uploadImgMaxSize = 8 * 1024 * 1024 // 将图片大小限制为 2M
                this.editor.config.uploadImgMaxLength = 6 // 限制一次最多上传 6 张图片
                this.editor.config.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
                this.editor.config.height = 600
                // 自定义 onchange 触发的延迟时间，默认为 200 ms
                this.editor.config.onchangeTimeout = 1000 // 单位 ms
                this.editor.config.onchange = (html) => {
                    this.info_ = html // 绑定当前逐渐地值
                    this.$emit('change', this.info_) // 将内容同步到父组件中
                }
                // 创建富文本编辑器
                this.editor.create()

                this.editor.config.uploadImgHooks = {
                    fail: (xhr, editor, result) => {
                        // 插入图片失败回调
                    },
                    success: (xhr, editor, result) => {
                        // 图片上传成功回调
                    },
                    timeout: (xhr, editor) => {
                        // 网络超时的回调
                    },
                    error: (xhr, editor) => {
                        // 图片上传错误的回调
                    },
                    customInsert: (insertImg, result, editor) => {
                        let url = result.data[0]
                        insertImg(url)
                    }
                }
            }

        },
        mounted() {
            this.seteditor()
            this.editor.txt.html("")
        }
    }
</script>

<style scoped>

</style>
